<template>
  <div>
    <el-button v-bind="$attrs" v-on="$listeners" @click="checkButton">{{fieldValue}}</el-button>
    <el-dialog
      :title="alertTitle"
      :visible.sync="alertDialogIsShow"
      :width="alertWidth"
      :before-close="function(){return alertDialogIsShow = false}"
      append-to-body
    >
      <div class="el-dialog-div">
        <alert-table-html
          :key="getkey()"
          :data="alertData"
          v-bind="alertAttrs"
          @submit="alertSubmit"
          @reset="alertReset"
          @bottonClick="tableBottonClick"
        ></alert-table-html>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getParent } from "../utils";
import { getPropByPath } from "element-ui/src/utils/util";

import analysisRouterParam from "@/utils/analysis-router-param.js";
import { validateIsNumber } from "@/utils/validate";
import { getInfo } from "@/api/tpl";
export default {
  components: {
    AlertTableHtml: () => import("@/views/base/table/index.vue"),
  },
  data() {
    return {
      alertTitle: "",
      alertDialogIsShow: false,
      alertWidth: "70%",
      alertAttrs: {},
      alertData: {},
    };
  },
  props: {
    value: {
      type: [String, Number],
      default: "请选择",
    },
    prop: {
      type: [String, Number],
    },
    txtValue: {
      type: [Object, Array],
      default() {
        return {};
      },
    },
  },
  computed: {
    parent() {
      return getParent.call(this);
    },
    fieldValue: {
      get() {
        console.log(this.$attrs, this.value, "--------------");
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {
    checkButton() {
      console.log(this.$attrs, "--------------");
      this.buttonClick(this.$attrs, {});
      this.$emit("buttonClick", this.$attrs);
    },
    buttonClick: function (obj, list = {}) {
      if (!obj.url && obj.changes !== "click") {
        return false;
      }
      var routerUrl = analysisRouterParam.init(obj.url, list);

      switch (obj.changes) {
        case "click":
          this.$emit("bottonClick", list);
          break;
        // case "jump":
        //   this.$router.push(routerUrl);
        //   break;
        // case "blank":
        //   const urlObj = this.$router.resolve(routerUrl);
        //   window.open(urlObj.href, "_blank");
        //   break;
        case "alert":
          this.alertInit(Object.assign(routerUrl, obj));
          break;
        // case "ajax":
        //   if (JSON.stringify(list) == "{}" || JSON.stringify(list) == "[]") {
        //     this.$message({
        //       message: "请先选择需要操作的数据",
        //       type: "error",
        //     });
        //     return false;
        //   }
        //   if (obj.tips) {
        //     this.$confirm(obj.tips, "提示", {
        //       confirmButtonText: "确定",
        //       cancelButtonText: "取消",
        //       type: "warning",
        //     })
        //       .then(() => {
        //         this.confirmAjax(routerUrl);
        //       })
        //       .catch(() => {
        //         console.log("取消");
        //       });
        //   } else {
        //     this.confirmAjax(routerUrl);
        //   }
        //   break;
      }
    },
    //弹出层模板初始化
    async alertInit({ path, query, width, height, tips }) {
      let tplId = path.replace("/", "");
      if (validateIsNumber(tplId) === false) {
        //  this.$message({
        //       message: '对不起，弹出层的链接只能是模板ID和参数拼接的URL',
        //       type: 'error'
        //   });
        return false;
      }

      var d = {
        id: tplId,
      };
      const res = await getInfo(d);
      if (res && res.code === 200) {
        this.alertTitle = tips;
        if(width) {
          this.alertWidth = width;
        }
        
        this.alertAttrs = res.data.info;
        this.alertDialogIsShow = true;
        this.alertData = query;
      }
    },
    //弹出层提交
    alertSubmit() {
      this.alertDialogIsShow = false;
      this.getTableDatas();
    },
    alertReset() {
      this.alertDialogIsShow = false;
    },
    getkey() {
      return Math.random();
    },
    tableBottonClick(obj) {
      this.alertDialogIsShow = false;
      var newValue = null;
      if (obj[this.$attrs.oldDataField]) {
        newValue = obj[this.$attrs.oldDataField];
      }
      if (this.$attrs.newDataField) {
        const model = this.parent.currentModel;
        if (model) {
          model[this.$attrs.newDataField] = newValue;
        }
      }
      return true;
    },
  },
};
</script>
<style scoped>
.el-dialog-div {
  max-height: 60vh;
  overflow: auto;
}
</style>